<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Details</title>
		<!-- Fix for iOS Safari zooming bug -->
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
		<meta charset="utf-8" />
		
		<script src="./pako.js"></script>
		<!--封装了一个发布订阅模式-->
		<script src="./event.js"></script>
		<!--图表库js-->
		<script src="./charting_library/charting_library.min.js"></script>
		<!--websocket-->
		<script src="./websocket.js"></script>
		<!--图表数据获取-->
		<script src="./datafeed.js"></script>
		<!--图表配置-->
		<script src="./chartConfig.js"></script>
		<!-- @import url("/common/css/font.css"); -->
		<link rel="stylesheet" type="text/css" href="./font.css"/>
	</head>
	<style>
		* {
  	padding: 0;
  	margin: 0;
  }
  
  body {
  	background-color: #2c3039;
  }

  /* 这个下面的css是 产品周期按钮的 */

		.header {
			position: relative;
			height: 8vh;
			box-shadow: 0px 10px 8px rgba(0,0,0,.05);
		}
		
		.symbol {
			display: flex;
			flex-wrap: wrap;
		}
		.symbol span {
			width: 30%;
			height: 30px;
			margin-right: 3%;
			margin-bottom: 20px;
			line-height: 30px;
			text-align: center;
			background-color: #071724;
			color: #d2daed;
			border-radius: 4px;
			font-size: 14px;
		}
		.symbol span.active {
			color: #071724;
			font-weight: 500;
			background-color: #d2daed;
		}
		
		.times {
			position: absolute;
			bottom: 0;
			width: 100%;
			display: flex;
			justify-content: space-between;
		}

		.times span {
			width: 16.66%;
			height: 30px;
			line-height: 30px;
			color: #ffffff;
			font-size: 16px;
			text-align: center;
		}

		.times span.active {
			position: relative;
			color: #157fd5;
			font-weight: 500;
		}

		.times span.active:before {
			content: " ";
			position: absolute;
			bottom: -2px;
			left: 10%;
			z-index: 1;
			width: 80%;
			height: 3px;
			background-color: #157fd5;
			border-radius: 3px;
		}
	
/* 	#tv_chart_container:before {
		content: " ";
		position: fixed;
		bottom: 22%;
		left: 5%;
		z-index: 999;
		width: 9vw;
		height: 9vw;
		background-color: #fff;
	} */
  /* 这个下面的css重点关注，和k线图与关 */

  #tv_chart_container {
    width: 100%;
    height: 92vh;
  }

  iframe {
    width: 100%;
    height: 100% !important;
		
  }
	.pane-legend-line.pane-legend-wrap.main.expand-line {
	    padding-right: 5px;
	}
	.depth-content-l-item-l .depth-content-l-item-t{font-weight:bold;}
			.depth-content-l-item-r .depth-content-l-item-n{color: #9fa7ab;}
			.depth-content-r .depth-content-l-item-r{color: #e64747;font-weight:bold;}
			.depth-content-l .depth-content-l-item-r{color: #01ad8f;font-weight:bold;}
			.depth-content-title{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20px 15px;
			}
			.depth-content-title .depth-content-title-item{
				font-size: 13px;
				color: #dadcde;
			}
			.depth-content{
				padding: 0 15px;
				display: flex;
			}
			.depth-content .depth-content-l,.depth-content .depth-content-r{
				flex: 1;
			}
			.depth-content .depth-content-l .depth-content-l-item,.depth-content .depth-content-r .depth-content-l-item{
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: relative;
				overflow: hidden;
				font-size: 13px;
			}
			.depth-content .depth-content-l .depth-content-l-item .depth-content-l-item-dep,.depth-content .depth-content-r .depth-content-l-item .depth-content-l-item-dep{
				position: absolute;
				top: 0;
				height: 30px;
				width: 100%;
				z-index: -1;
			}
			.depth-content-l-item-dep.depth-content-l-item-dep-green{
				background: #ebf9f3;
			}
			.depth-content-l-item-dep.depth-content-l-item-dep-red{
				background: #fde9ef;
			}
			.depth-content .depth-content-l .depth-content-l-item .depth-content-l-item-l,.depth-content .depth-content-r .depth-content-l-item .depth-content-l-item-l{
				display: flex;
				align-items: center;
				line-height: 30px;
			}
			.depth-content .depth-content-r .depth-content-l-item .depth-content-l-item-r{
				display: flex;
				align-items: center;
				line-height: 30px;
			}
			.depth-content .depth-content-r .depth-content-l-item .depth-content-l-item-r .depth-content-l-item-t{
				padding-right: 15px;
			}
			.depth-content .depth-content-l .depth-content-l-item .depth-content-l-item-l .depth-content-l-item-t,.depth-content .depth-content-r .depth-content-l-item .depth-content-l-item-l .depth-content-l-item-t{
				padding-left: 10px;
				
			}
</style>
	<body>
		<div class="root">
			<div class="header">
				<div id="symbol" class="symbol">
				<!-- 	<span class="active" data-value="btcusdt">BTC/USDT</span>
					<span data-value="ethusdt">ETH/USDT</span>
					<span data-value="bchusdt">BCH/USDT</span>
					<span data-value="eosusdt">EOS/USDT</span>
					<span data-value="etcusdt">ETC/USDT</span> -->
				</div>
				<div class="times" id="interval">
					<span data-value="1" class="fenshi">分时</span>
					<span class="active 15min" data-value="15">15分钟</span>
					<!-- <span data-value="15">15分钟</span> -->
					<span data-value="60" class="1hour">1小时</span>
					<span data-value="240"  class="4hour">4小时</span>
					<span data-value="1D"  class="1day">1日</span>
					<span data-value="1W"  class="1week">1周</span>
					<!-- <span data-value="1D">日线</span> -->
				</div>
			</div>
			<div class="chart">
				<div id="tv_chart_container"></div>
			</div>
		<!-- 	<div class="depth-content-title">
				<div class="depth-content-title-item depth-content-title-item-l">买盘 数量(<text></text>)</div>
				<div class="depth-content-title-item">价格(USDT)</div>
				<div class="depth-content-title-item depth-content-title-item-l">数量(<text></text>)卖盘</div>
			</div>
			<div class="depth-content">
				<div class="depth-content-l"></div>
				<div class="depth-content-r"></div>
			</div> -->
		</div>
		
		<!--页面总统js 初始化图表库 绑定点击事件等-->
		<script src="./index.js"></script>
		<!-- 拦截点击logo跳转 -->
		
		<!-- uni 的 SDK -->
		<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>
		
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
		<script type="text/javascript">
			
			var timers;
			
			function getQuery(name) {
				// 正则：[找寻'&' + 'url参数名字' = '值' + '&']（'&'可以不存在）
				let reg = new RegExp("(^|/?)"+ name +"=([^/?]*)(/?|$)");
				// console.log(window.location.search.substr(1));
				let r = window.location.search.substr(1).match(reg);
				if(r != null) {
					// 对参数值进行解码
					return decodeURIComponent(r[2]);
				}
				return null;
			}
			// document.title =""
			  document.addEventListener('UniAppJSBridgeReady', function() {
			        // uni.postMessage({
			        //     data: {
			        //         action: 'message'
			        //     }
			        // });
					// uni.setNavigationBarTitle({
					// 	title:this.title+'/USDT'
					// })
					let lange_type = plus.storage.getItem('lang')
					var data_ = getQuery('data')
					document.getElementsByTagName("title")[0].innerText = data_+'/USDT'
					$('.times .fenshi').html(lange_type=='en'?'1min':'分时')
					
					$('.times .15min').html(lange_type=='en'?'15min':'15分钟')
					$('.times .1hour').html(lange_type=='en'?'1hour':'1小时')
					$('.times .4hour').html(lange_type=='en'?'4hour':'4小时')
					
					$('.times .1day').html(lange_type=='en'?'1day':'1日')
					$('.times .1week').html(lange_type=='en'?'1week':'1周')
		
		
					var ws = plus.webview.currentWebview();
					ws.overrideUrlLoading({
						mode: 'reject'
					}, function(e) {
						console.log('拦截跳转 url: ' + e.url);
					})
			    });
				 
		</script>
	</body>
</html>
